<template>
  <div id="Course">

    <el-container>
      <el-header class="Unhide" style>
        <div class="course-header">
          <div class="course-header-login">
            <div class="logo">
              <img src="../assets/img/logo-course.png" alt />
              <div class="textmode">
                <p>中国就业指导中心</p>
                <p>官方推荐学习平台</p>
              </div>
            </div>
          </div>

          <div class="field">
            <input type="text" placeholder="搜索感兴趣的内容" />
            <i class="el-icon-search"></i>
          </div>
        </div>
      </el-header>
      <el-main class="directionof">
        <span class="direction">方向：</span>
        <span class="complete">全部</span>
        <el-tag>前端开发</el-tag>
        <el-tag>后端开发</el-tag>
        <el-tag>移动开发</el-tag>
        <el-tag>计算机基础</el-tag>
        <el-tag>前言技术</el-tag>
        <el-tag>计算机&大数据</el-tag>
        <el-tag>运维&测试</el-tag>
        <el-tag>数据库</el-tag>
        <el-tag>UI设计&多媒体</el-tag>
        <el-tag>游戏</el-tag>
        <el-tag>全栈技术</el-tag>
      </el-main>
      <el-main class="directionofList">
        <div class="directionofList-dir">
          <span class="direction">分类：</span>
        </div>
        <div class="directionofList-all">
          <span class="complete">全部</span>
          <el-tag>Typescript</el-tag>
          <el-tag>计算机网络</el-tag>
          <el-tag>Javafullstack</el-tag>
          <el-tag>HTML/CSS</el-tag>
          <el-tag>JavaScript</el-tag>
          <el-tag>Vue.js</el-tag>
          <el-tag>React.JS</el-tag>
          <el-tag>Angular</el-tag>
          <el-tag>Node.js</el-tag>
          <el-tag>jQuery</el-tag>
          <el-tag>Bootstrap</el-tag>
          <el-tag>Sass/Less</el-tag>
          <el-tag>WebApp</el-tag>
          <el-tag>小程序</el-tag>
          <el-tag>Java</el-tag>
          <el-tag>SSM</el-tag>
          <el-tag>PHP</el-tag>
          <el-tag>Python</el-tag>
          <el-tag>爬虫</el-tag>
          <el-tag>Django</el-tag>
          <el-tag>Tornado</el-tag>
          <el-tag>Go</el-tag>
          <el-tag>CC++</el-tag>
          <el-tag>C#</el-tag>
          <el-tag>Ruby</el-tag>
          <el-tag>Android</el-tag>
          <el-tag>iOS</el-tag>
          <el-tag>React native</el-tag>
          <el-tag>WEEX</el-tag>
          <el-tag>算法与数据结构</el-tag>
          <el-tag>数学</el-tag>
          <el-tag>大数据</el-tag>
          <el-tag>Hadoop</el-tag>
          <el-tag>Spark</el-tag>
          <el-tag>Hbase</el-tag>
          <el-tag>Storm</el-tag>
          <el-tag>云计算</el-tag>
          <el-tag>AWS</el-tag>
          <el-tag>Docker</el-tag>
          <el-tag>Kubernetes</el-tag>
          <el-tag>运维</el-tag>
          <el-tag>自动化运维</el-tag>
          <el-tag>运维工具</el-tag>
          <el-tag>中间件</el-tag>
          <el-tag>Linux</el-tag>
          <el-tag>测试</el-tag>
          <el-tag>功能测试</el-tag>
          <el-tag>性能测试</el-tag>
          <el-tag>自动化测试</el-tag>
          <el-tag>接口测试</el-tag>
          <el-tag>安全测试</el-tag>
          <el-tag>MySQL</el-tag>
          <el-tag>Redis</el-tag>
          <el-tag>MongoDB</el-tag>
          <el-tag>Oracle</el-tag>
          <el-tag>sql Server</el-tag>
          <el-tag>微服务</el-tag>
          <el-tag>区块链</el-tag>
          <el-tag>模型制作</el-tag>
          <el-tag>以太坊</el-tag>
          <el-tag>机器学习</el-tag>
          <el-tag>深度学习</el-tag>
          <el-tag>计算机视觉</el-tag>
          <el-tag>自然语言处理</el-tag>
          <el-tag>数据分析&挖掘</el-tag>
          <el-tag>动画效果</el-tag>
          <el-tag>设计基础</el-tag>
          <el-tag>设计工具</el-tag>
          <el-tag>APPUI设计</el-tag>
          <el-tag>产品交互</el-tag>
          <el-tag>Unity 3D</el-tag>
          <el-tag>CSS</el-tag>
          <el-tag>Cocos2d-x</el-tag>
          <el-tag>Html5</el-tag>
          <el-tag>CSS3</el-tag>
          <el-tag>NoSql</el-tag>
          <el-tag>Photoshop</el-tag>
        </div>
      </el-main>
      <el-main class="directionof-difficulty">
        <div class="steldea">
          <span class="direction">难度：</span>
          <span class="complete pop">全部</span>
          <el-tag>入门</el-tag>
          <el-tag>初级</el-tag>
          <el-tag>中级</el-tag>
          <el-tag>高级</el-tag>
        </div>
        <span class="recommended">一分钟获得个性化课程推荐</span>
      </el-main>
    </el-container>
    <div class="ListAll">
      <div class="ButtonList">
        <div class="ButtonList-button">
          <button>最新</button>
          <button>最热</button>
          <button>微课</button>
        </div>
        <classInfoIntroduce :dataList="curriculumList" />
      </div>
      <div class="block">
        <el-pagination layout="prev, pager, next" :total="500"></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import classInfoIntroduce from "../components/classInfoIntroduce";

export default {
  components: {
    classInfoIntroduce,

  },
  data() {
    return {
      curriculumList: [
        {
          id: 10001,
          className: "",
          courseStat: "",
          classPic:
            "https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg",
          author: "",
          authorPic: "",
          classTitle: "用技术打造小程序简历",
          classRank: "入门",
          viewsNumber: 2333,
          classDesc: "",
          price: "1.00",
          originalPrice: "",
          free: false,
          evaluate: ""
        },
        {
          id: 10002,
          className: "",
          courseStat: "",
          classPic:
            "https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg",
          author: "",
          authorPic: "",
          classTitle: "用技术打造小程序简历",
          classRank: "入门",
          viewsNumber: 2333,
          classDesc: "",
          price: "1.00",
          originalPrice: "",
          free: true,
          evaluate: ""
        },
        {
          id: 10003,
          className: "",
          courseStat: "",
          classPic:
            "https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg",
          author: "",
          authorPic: "",
          classTitle: "用技术打造小程序简历",
          classRank: "入门",
          viewsNumber: 2333,
          classDesc: "",
          price: "1.00",
          originalPrice: "",
          free: false,
          evaluate: ""
        },
        {
          id: 10004,
          className: "",
          courseStat: "",
          classPic:
            "https://img1.sycdn.imooc.com/szimg/5c0493ce000126b106000338-360-202.jpg",
          author: "",
          authorPic: "",
          classTitle: "用技术打造小程序简历",
          classRank: "入门",
          viewsNumber: 2333,
          classDesc: "",
          price: "1.00",
          originalPrice: "",
          free: false,
          evaluate: ""
        }
      ]
    };
  }
};
</script>

<style  >
* {
  margin: 0;
  padding: 0;
}

#Course .course-header {
  margin: auto;
  width: 1200px;
  height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#Course .course-header-login .logo {
  display: flex;
  align-items: center;
}
#Course .course-header-login .logo > img {
  height: 100%;
}
#Course .textmode {
  font-size: 10px;
  margin-left: 18px;
}
#Course .course-header > .field > input {
  height: 36px;
  width: 450px;
  border: 0px solid #f3f5f6;
  border-radius: 10px;
  background: #f3f5f6;
  padding-left: 15px;
}
#Course .course-header > .field > i {
  position: relative;
  right: 30px;
  line-height: 36px;
}
#Course .direction {
  font-size: 14px;
  font-weight: 900;
  height: 32px;
  line-height: 30px;
}
#Course .directionof {
  height: 65px;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid #edf1f2;
}
#Course .directionof .el-tag:hover {
  color: #ec1500;
}
#Course .directionofList {
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 14px !important;
  line-height: 30px !important;
  margin-top: 16px !important;
  /* align-items: center !important; */
  border-bottom: 1px solid #edf1f2;
  padding-bottom: 12px !important;
}
#Course .directionofList-all {
  width: 1150px !important;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}
#Course .directionofList-all .el-tag:hover {
  color: #ec1500;
}
#Course .directionof-difficulty {
  height: 65px;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
#Course .recommended {
  padding: 5px 20px;
  background-image: linear-gradient(to right, #ff9d07, #f8360b);
  border-radius: 20px;
  color: white;
  font-weight: 900;
}
#Course .complete{
  font-size: 14px !important;
  font-weight: 900;
  background: #fef1f1;
  padding: 0 10px;
  height: 32px;
  line-height: 30px;
  border-radius: 4px;
  color: #f20d0d;
}
#Course .pop{
  padding: 6.5px 10px;
}
#Course .el-tag {
  background-color: #fff !important;
  border-color: white !important;
  display: inline-block;
  height: 32px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 14px !important;
  color: #444;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
}
/* input默认样式
input {
  outline: none; /* 消除默认点击蓝色边框效果*/
/* } */
/* 去掉选中时的蓝色框 */
input:focus {
  border: none;
}
#Course .Unhide {
  margin: auto;
  height: 96px !important;
  border-bottom: 2px solid #edf1f2;
  width: 1200px;
}
#Course .el-header,
.el-footer {
  background-color: #fff;
  color: #333;
  text-align: center;
  /* line-height: 60px; */
}
#Course .el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
#Course .el-main {
  margin: auto;
  width: 1200px;
  color: #333;
}
#Course .el-container {
  margin-bottom: 20px;
}
#Course .el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
#Course .el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
#Course .ListAll {
  background: #f3f5f7;
}
#Course .ListAll .ButtonList {
  width: 1200px;
  margin: auto;
  padding-bottom: 50px;
}
#Course .ListAll .ButtonList-button {
  padding: 20px 0;
  display: flex;
  justify-content: left;
}
#Course .ListAll .ButtonList-button > button {
  color: white;
  background: #9199a1;
  border: 1px solid #9199a1;
  padding: 5px 10px;
  margin-right: 5px;
  border-radius: 15px;
  outline: none;
}
#Course .block {
  margin: 10px 0;
}
#Course .block .el-pagination {
  display: flex;
  justify-content: center;
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
}
#Course .block .el-pagination .btn-prev,
#Course .block .el-pagination .btn-next,
#Course .block .el-pagination .el-pager li 
{
  background: #f3f5f7;
}

</style>